import {Release030Intro} from './Release030Intro.jsx';
import {MDXLayout} from './MDXLayout';
export default MDXLayout;

# Release Notes

## v0.12.0

### Updates
* [ActionButton](?path=/docs/actionbutton--docs): Add pending state
* [ColorSlider](?path=/docs/colorslider--docs): Fix `ColorLoupe` position in RTL locales
* [ComboBox](?path=/docs/combobox--docs): Support avatars and onAction
* [CustomDialog](?path=/docs/customdialog--docs): Support custom widths
* [Dialog](?path=/docs/dialog--docs): Add XL size
* [Disclosure](?path=/docs/disclosure--docs): Add animation to disclosure
* [InlineAlert](?path=/docs/inlinealert--docs): Support heading-less Inline Alerts
* [Picker](?path=/docs/picker--docs): Support multiple selection and avatars
* [Tags](?path=/docs/taggroup--docs): Fix Tag collapse calculation for removeable tags
* [Tooltip](?path=/docs/tooltip--docs): Prevent text overflow by default
* Allow placeholders in supported S2 components (e.g. ColorArea, ComboBox, NumberField, SearchField, TextArea, TextField)
* Apply `page.css` styles to the Shadow DOM

### Popover Styling Updates

The Popover component has been updated to better support custom styling. To 
remove the preset padding, use the new `padding` prop and wrap your Popover content
in a custom div with your desired styling.

## v0.11.0

### New Components
* [SelectBoxGroup](?path=/docs/selectboxgroup-alpha--docs)

### Updates
* [ComboBox](?path=/docs/combobox--docs): Fix empty state rendering when no items match the current query
* [Picker](?path=/docs/picker--docs): Fix erroneous dropdown outline when opening the Picker via click  
* [Tabs](?path=/docs/tabs--docs): Support collapse behavior on Tabs when customizing the layout

## v0.10.0

### Font update

This release introduces a new font for Spectrum 2: Adobe Clean Spectrum VF. This is an evolution of the previous Adobe Clean, with slightly updated metrics allowing for better vertical centering. Along with this update, the S2 Provider component now automatically handles loading the fonts needed for the user's language. The new font does not affect previous versions of React Spectrum.

If you previously used `page.css` without a `Provider`, you'll need to add a `Provider` around your app to load the fonts. See the [updated docs](?path=/docs/intro--docs#setting-up-your-app) for details.

### New Components

* [Calendar](?path=/docs/calendar--docs)
* [RangeCalendar](?path=/docs/rangecalendar--docs)
* [DateField](?path=/docs/datefield--docs)
* [DatePicker](?path=/docs/datepicker--docs)
* [DateRangePicker](?path=/docs/daterangepicker--docs)
* [TimeField](?path=/docs/timefield--docs)

### Updates

* [CardView](?path=/docs/cardview--docs): Fix ActionBar from not scrolling
* [ActionButton](?path=/docs/actionbutton--docs): Fix avatar-only ActionButtons to have square dimensions
* [Tabs](?path=/docs/tabs--docs): Improve selection indicator animation, fix collasped tabs
* [ProgressCircle](?path=/docs/progresscircle--docs): Add track outline in High Contrast Mode
* [Switch](?path=/docs/switch--docs): Fix the toggle in RTL locales
* [TreeView](?path=/docs/treeview--docs): Support async loading

## v0.9.1

### Updates
* [Button](?path=/docs/button--docs): Fix focus visible styles from being applied on standard focus
* [ContextualHelp](?path=/docs/contextualhelp--docs): Update width to match Spectrum designs
* [Tabs](?path=/docs/tabs--docs): Update selection indicator when tab text changes
* [TagGroup](?path=/docs/taggroup--docs): Fix focus visible styles from being applied on standard focus

## v0.9.0

### Updates

* [Combobox](?path=/docs/combobox--docs): Support for virtualization and async loading
* [Dialog](?path=/docs/dialog--docs): Update sizes
* [Picker](?path=/docs/picker--docs): Support for virtualization and async loading
* [Popover](?path=/docs/popover--docs): Add `triggerRef` prop
* [TableView](?path=/docs/tableview--docs): Support custom menus in columns
* Apply `position: relative` to Radio and Checkbox to prevent layout jumps

### UNSAFE_className Typescript Error

Style macros passed to `UNSAFE_className` will now result in a TypeScript error. This is not allowed because `UNSAFE_className` is appended to the component’s own styles, not merged. For example, if you pass a style macro class that sets a property but the component also has a class setting the same property, both will be applied and result in undefined behavior depending on the order the CSS was loaded on the page.

We strongly discourage using `UNSAFE_className` because it results in inconsistent UIs and hard to maintain code. Instead, use [React Aria Components](https://react-spectrum.adobe.com/react-aria/index.html) with the [S2 style macro](https://react-spectrum.adobe.com/s2/index.html?path=/docs/style-macro--docs) to create custom components. [Safe style properties](https://react-spectrum.adobe.com/s2/index.html?path=/docs/intro--docs#styling) can be passed to the `styles` prop of an S2 component.


### Style macro updates

We have made significant changes to the way our Style Macro generates class names in an effort to make them stable between versions. While we work to stabilize the style macro class names, we have added a postfix based on the version number so that class names don't conflict with any prior or future version.

We also made some changes to the available style macro values.

* Reduced the default spacing scale so it only goes up to 96px. Other values can be used via the `space()` macro
* Switched to rems for media queries. Since component sizes scale with rems, breakpoints need to match.
* Switch to px instead of rems for padding and absolute positioning. This avoids adding extra whitespace that causes additional text wrapping.
* Used rems and touch scaling for icon sizes, and added t-shirt size prop
* Added support for percentages and [viewport relative units](https://www.w3.org/TR/css-values-4/#viewport-relative-lengths) (e.g. vw)
* Added support for arbitrary [aspect ratio values](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio)
* Added support for `calc` and other [math functions](https://www.w3.org/TR/css-values-4/#math)
* Added support for [css-wide keywords](https://www.w3.org/TR/css-values-4/#common-keywords) like `inherit`
* Colors no longer include default hover/press/focus states (e.g. `backgroundColor: 'accent'`). Use the `baseColor` macro instead.
* The `control` value has been removed from `fontSize`, `borderRadius`, `width`, `height`, and other sizing properties. Use explicit values for each t-shirt size instead.
* Fixed spelling of `disc` in `listStyleType` (was `dist`)

## v0.8.0

### New Components

* [NotificationBadge](?path=/docs/actionbutton--docs#notification-badges)
* [Toast](?path=/docs/toast--docs) (alpha)

### Updates

* Pass DOM Props to ButtonGroup
* Prevent Dividers from growing or shrinking in a flex container by default
* Export Autocomplete
* Export SortDescriptor type

### Disclosure Design updates
Spectrum has updated the S disclosure design. As a result, all other sizes (M, L, XL) now map to one size smaller than before. See [PR](https://github.com/adobe/react-spectrum/pull/8006) for details.

## v0.7.0

### New Components

* [TreeView](?path=/docs/treeview--docs)

### Updates

* [Badge](?path=/docs/badge--docs): Add `overflowMode` prop, fix icon alignment, update typo from `variant="charteuse"` to `variant="chartreuse"`
* [CardView](?path=/docs/cardview--docs): Fix styling when using `renderActionBar`
* Image: Add `fetchPriority` prop
* [Menu](?path=/docs/menu--docs): Fix menu item's focus rings from exceeding popover boundaries
* [Tabs](?path=/docs/tabs--docs): Add collapse behavior
* Remove `all: revert-layer` from style macro generated CSS to fix Safari issues
* Remove references to CSS `flex` shorthand. Please use `flexGrow`, `flexBasis`, and `flexShrink` instead.

### Codemods

* Update S2 icon migration map
* Handle margin/padding shorthands in style props codemod

### Important CSS update

In this release, we have made significant changes to the way our Style Macro generates CSS in order to fix issues with Safari. The Style Macro uses [CSS Cascade Layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) to avoid CSS specificity and ordering issues. However, this means global CSS declared outside a `@layer`, such as CSS resets, will take precedence over S2's CSS. To avoid this, we previously used [all: revert-layer](https://developer.mozilla.org/en-US/docs/Web/CSS/revert-layer). Unfortunately, due to numerous bugs in Safari 18, this caused rendering issues in our components.

To fix these Safari issues, we have removed `all: revert-layer` in this release. This means that global CSS will now take precedence over S2's styles. **If you are using a CSS reset on the same page as S2 components, you will need to remove it** or put it in a `@layer` of its own. See [the docs](?path=/docs/intro--docs#css-resets) for more information.

**If you are using a version older than React Spectrum v3 on the same page, you must update to the latest version.** See the Adobe internal documentation for more details.

## v0.6.0

### New Components

* [ActionBar](?path=/docs/actionbar--docs)

### Updates

* [Button](?path=/docs/button--docs): Add `genai` and `premium` gradient variants
* [Menu](?path=/docs/menu--docs): Add `hideLinkOutIcon` prop, update alignment of items in different sections, and show checkmark on selected items that are links.
* Added `staticColor="auto"` option to [ActionButton](?path=/docs/actionbutton--docs), [ToggleButton](?path=/docs/togglebutton--docs), [Divider](?path=/docs/divider--docs), [Meter](?path=/docs/meter--docs), [ProgressBar](?path=/docs/progressbar--docs), and [Link](?path=/docs/link--docs)
* [ContextualHelp](?path=/docs/contextualhelp--docs): Fix alignment with field labels
* [InlineAlert](?path=/docs/inlinealert--docs): Remove maximum width
* [CheckboxGroup](?path=/docs/checkboxgroup--docs): Fix `isRequired` within a Form

### Codemods

* Added TableView codemods

## v0.5.0

In this release we have updated our Dialog and DialogTrigger APIs to improve layout flexibility for custom dialogs and popovers. Dialog has been split into four components:

* [Dialog](?path=/docs/dialog--docs) – a modal dialog with a standard layout with slots for the heading, content, hero image, button group, etc. This corresponds to the previous `type="modal"` API.
* [FullscreenDialog](?path=/docs/fullscreendialog--docs) – a fullscreen or takeover modal, similar to a Dialog but with different slots and layout. This corresponds to the previous `type="fullscreen"` and `type="fullscreenTakeover"` APIs.
* [CustomDialog](?path=/docs/customdialog--docs) – a modal dialog with a completely custom layout. It can have default padding or go edge-to-edge. No built-in slots are provided, the layout is entirely up to you.
* [Popover](?path=/docs/popover--docs) Popovers no longer support the previous dialog-style layout, which was rarely needed in recent apps. In addition, popover now has a reduced amount of padding by default, which was a common request.

In addition, several DialogTrigger props have moved to the above children:

* `type` is removed. Use one of the above components instead.
* `isKeyboardDismissDisabled` moved to Dialog, FullscreenDialog, and CustomDialog
* `isDismissable` was renamed to `isDismissible` (fixed spelling), and moved to Dialog and CustomDialog
* `hideArrow`, `offset`, `crossOffset`, `containerPadding`, `placement`, and `shouldFlip` moved to Popover

We've also continued to iterate on developer experience based on your feedback. Documentation on style macro usage with regards to
[colors](?path=/docs/style-macro--docs#colors) and [typography](?path=/docs/style-macro--docs#typography) have been added to help clarify
these common use cases. Style macro properties like `width` and `height` now allow for arbitrary pixel size values, please see the [docs](?path=/docs/style-macro--docs#sizing)
for more information. Finally, documentation on [optimizing CSS bundling](?path=/docs/style-macro--docs#css-optimization) have also been
added to help you generate a properly optimized output when using the bundler of your choice.

### New components

* [ActionButtonGroup](?path=/docs/actionbuttongroup--docs)
* [CloseButton](?path=/docs/customdialog--docs)
* [CustomDialog](?path=/docs/customdialog--docs)
* [FullscreenDialog](?path=/docs/fullscreendialog--docs)
* [Popover](?path=/docs/popover--docs)
* [ToggleButtonGroup](?path=/docs/togglebuttongroup--docs)

### Updates

* [Accordion](?path=/docs/accordion--docs): Add support for adjacent sibling elements in header
* [ActionButton](?path=/docs/actionbutton--docs): Add support for Avatars in ActionButtons
* [Dialog](?path=/docs/dialog--docs): See above for a summary of the changes to Dialog and Dialog adjacent components.
* [Disclosure](?path=/docs/disclosure--docs): Add support for adjacent sibling elements in header
* [DropZone](?path=/docs/dropzone--docs): Add t-shirt sizing
* [Menu](?path=/docs/menu--docs): Add support for separate user defined selection modes per MenuSection
* [Meter](?path=/docs/meter--docs): Add label positioning support
* Update Spectrum Tokens to v53
* Allow arbitrary pixel sizes for style macro sizing properties (e.g. width, height)

### Codemods

* Support Dialog updates
* Support ActionGroup -> ActionButtonGroup/ToggleButtonGroup
* Support arbitrary pixel sizing for style macro sizing properties
* Update S1 to S2 icon mapping

## v0.4.0

### New components

* [Accordion](?path=/docs/accordion--docs)
* [Disclosure](?path=/docs/disclosure--docs)
* [Card](?path=/docs/card--docs)
* [CardView](?path=/docs/cardview--docs)
* [SegmentedControl](?path=/docs/segmentedcontrol--docs)
* [TableView](?path=/docs/tableview--docs)

### Updates

* [ProgressBar](?path=/docs/progressbar--docs): Support side label, update edges to be rounded, and support custom widths
* [ProgressCircle]((?path=/docs/progresscircle--docs)): Update edges to be rounded
* [Badge](?path=/docs/badge--docs): Add subtle and outline fill variants
* [Breadcrumbs](?path=/docs/breadcrumbs--docs): Add collapse behavior
* [Button](?path=/docs/button--docs): Add support for pending state
* Update Spectrum Tokens to v46

### Codemods

* Handle legacy Link API
* Remove Section and Items imports if not used elsewhere in file
* Support Badge
* Support Well
* Support icons
* Fix links and install step

## v0.3.0

<Release030Intro />

### New components

* [NumberField](?path=/docs/numberfield--docs)
* [AlertDialog](?path=/docs/alertdialog--docs)
* [Linear and gradient illustrations](?path=/docs/illustrations--docs)
* [AvatarGroup](?path=/docs/avatargroup--docs)
* [Tabs](?path=/docs/tabs--docs)

### Updates

* Add collapse and action support to TagGroup
* Add support for new Adobe Clean variable font
* Updated [workflow icons](?path=/docs/workflow-icons--docs) – **PLEASE NOTE**: some icons changed names in this release.
* Add CLI and Parcel plugins to build custom icons and illustrations
* Add translations for all components
* Add slot contexts to all S2 components
* Fix menu z-index
* Fix overlay trigger press scaling and menu description color
* Fix ComboBox and NumberField custom width
* Fix padding on fields with no visible label
* Add ContextualHelp Storybook stories to components missing them

## v0.2.0

### New components

* [Breadcrumbs](?path=/docs/breadcrumbs--docs)
* [Contextual Help](?path=/docs/contextualhelp--docs)
* [ColorArea](?path=/docs/colorarea--docs)
* [ColorField](?path=/docs/colorfield--docs)
* [ColorSlider](?path=/docs/colorslider--docs)
* [ColorSwatch](?path=/docs/colorswatch--docs)
* [ColorSwatchPicker](?path=/docs/colorswatchpicker--docs)
* [ColorWheel](?path=/docs/colorwheel--docs)
* [RangeSlider](?path=/docs/rangeslider--docs)
* [Slider](?path=/docs/slider--docs)

### Updates

* [ESBuild starter](https://github.com/adobe/react-spectrum/tree/main/examples/s2-esbuild-starter-app) added
* InlineAlert iconography updated
* ContextualHelp added to all form field components
* Fixed custom widths for field components
* Spectrum tokens updated
* CSS processing updated so output size is smaller

See the updated [API changelog](https://github.com/adobe/react-spectrum/blob/main/packages/@react-spectrum/s2/api-diff.md) for a full list of changes since RSP v3.

## v0.1.0

### New components

* [Badge](?path=/docs/badge--docs)
* [ComboBox](?path=/docs/combobox--docs)
* [Meter](?path=/docs/meter--docs)
* [Picker](?path=/docs/picker--docs)

### Updates

* [TagGroup](?path=/docs/taggroup--docs) now supports avatars, images, error message and description help text, and improved hover/focus styling
* Updated React Aria Components to v1.2.0
* Fixed global styles such as CSS resets from applying to Spectrum 2 elements. Note that any CSS rule referenced from an `UNSAFE_className` prop must now be wrapped in `@layer UNSAFE_overrides`. See [the docs](?path=/docs/intro--docs#unsafe-style-overrides) for more details.
* The `style` macro will now error if it is called without importing `with {type: 'macro'}`. Previously it would fail to apply styles silently. This should help with debugging.

See the updated [API changelog](https://github.com/adobe/react-spectrum/blob/main/packages/@react-spectrum/s2/api-diff.md) for a full list of changes since RSP v3.
